<template>
  <view class="detail">
    <view class="row">
      <view class="col">
        <view class="col-label">预警编号:</view>
        <view class="col-text grey"> {{ detail.alarmId }} </view>
        <view
          class="iconfont icon-fuzhi col-icon"
          @click="handleCopy(detail.alarmId)"
        >
        </view>
        <view :class="['card_title-right', getColor(detail.isDeal)]">
          {{ detail.isDeal | filtersDealStatus }}
        </view>
      </view>
      <view class="alarm-title">
        {{ detail.typeName }}-{{ detail.alarmLevel | filtersLevel }}
      </view>
      <view class="col">
        <view class="col-label">预警级别:</view>
        <view class="col-text">
          <u-tag
            :text="detail.alarmLevel | filtersLevel"
            plain
            size="mini"
            :bgColor="
              tagColor[detail.alarmLevel ? detail.alarmLevel : 0]['bgColor']
            "
            :color="
              tagColor[detail.alarmLevel ? detail.alarmLevel : 0]['color']
            "
            :borderColor="
              tagColor[detail.alarmLevel ? detail.alarmLevel : 0]['borderColor']
            "
          ></u-tag>
        </view>
      </view>
      <view class="col">
        <view class="col-label">预警时间:</view>
        <view class="col-text"> {{ detail.alarmTime || '-' }} </view>
      </view>
      <view class="col">
        <view class="col-label">船名:</view>
        <view class="col-text"> {{ detail.shippingName || '-' }} </view>
      </view>
      <view class="col">
        <view class="col-label">驾驶员:</view>
        <view class="col-text">{{ detail.captain || '-' }} </view>
      </view>
      <view class="col">
        <view class="col-label">单位名称:</view>
        <view class="col-text"> {{ detail.tenantName || '-' }} </view>
      </view>
      <view class="col">
        <view class="col-label">预警内容:</view>
        <view class="col-text col-contant">
          {{ detail.alarmInfo || '-' }}
        </view>
      </view>
      <view class="col">
        <view class="col-label">处理人:</view>
        <view class="col-text"> {{ detail.dealUserName || '-' }} </view>
      </view>
      <view class="col">
        <view class="col-label">处理时间:</view>
        <view class="col-text">{{ detail.dealTime || '-' }} </view>
      </view>
      <view class="flex" v-if="detail.isDeal === 0">
        <u-button class="btn" text="忽略" @click="handleDeal(2)"></u-button>
        <u-button
          type="primary"
          class="btn"
          text="处理"
          @click="handleDeal(1)"
        ></u-button>
      </view>
      <view class="flex" v-if="detail.isDeal === 1">
        <u-button type="primary" :disabled="true" text="已处理"></u-button>
      </view>
      <view class="flex" v-if="detail.isDeal === 2">
        <u-button :disabled="true" text="已忽略"></u-button>
      </view>
      <view v-if="isVideo">
        <view class="label"> 证据图片及视频 </view>
        <uni-swiper-dot
          class="uni-swiper-dot-box"
          :info="info"
          :current="current"
          :mode="mode"
          field="content"
          v-show="!autoplay"
          :dotsStyles="dotStyle"
        >
          <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
            <swiper-item
              v-for="(item, index) in info.slice(0, info.length - 1)"
              :key="index"
            >
              <view class="swiper-item">
                <image v-if="item.type === 0" :src="item.url"></image>
              </view>
            </swiper-item>
            <swiper-item>
              <image
                class="swiperImage"
                :src="videoPicture"
                @click="showVideo"
                mode="scaleToFill"
              ></image>
              <image
                class="play"
                @click="showVideo"
                src="../../../static/image/play.png"
                style="width: 40px; height: 40px"
              >
              </image>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
        <view v-show="autoplay" class="video-container">
          <video
            :src="videoUrl"
            id="myVideo"
            class="video"
            objectFit="cover"
            @play="handlePlay()"
            @pause="handlePause()"
          >
            <cover-image
              class="videoClose"
              @click="colseVideo()"
              src="../../../static/image/close.png"
            >
            </cover-image>
          </video>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAlarmDetail, savaAlarmStatus } from '@/api/alarm'
export default {
  data() {
    return {
      /** 预警id */
      alarmId: '',
      alarmCode: '',
      detail: {},
      tagColor: [
        // 一级预警
        {
          bgColor: '#f9f0ff',
          color: '#722ed1',
          borderColor: '#d3adf7',
        },
        {
          bgColor: '#fff1f0',
          color: '#f5222d',
          borderColor: '#ffa39e',
        },
        {
          bgColor: '#ff9900',
          color: '#fff',
          borderColor: '#fcbd71',
        },
        {
          bgColor: 'grey',
          color: '#fff',
          borderColor: '#fff',
        },
      ],
      info: [],
      isVideo: true,
      controls: false,
      current: 0,
      isShow: true,
      mode: 'default',
      dotsStyles: {},
      swiperDotIndex: 0,
      autoplay: false,
      videoContext: null,
      videoPicture: '../../../static/image/black.png',
      videoUrl: '',
      dotStyle: {
        backgroundColor: 'rgba(83, 200, 249,0.3)',
        border: '1px rgba(83, 200, 249,0.3) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
        selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
      },
    }
  },
  onLoad(v) {
    this.alarmId = v.alarmId
    this.alarmCode = v.alarmCode
  },
  onReady: function (res) {
    // #ifndef MP-ALIPAY
    this.videoContext = uni.createVideoContext('myVideo')
    // #endif
  },
  mounted() {
    this.getAlarmDetail()
  },
  filters: {
    // 预警级别
    filtersLevel(value) {
      switch (value) {
        case 0:
          return '一级预警'
        case 1:
          return '二级预警'
        case 2:
          return '三级预警'
        case 3:
          return '四级预警'
        default:
          break
      }
    },
    // 处理状态
    filtersDealStatus(v) {
      // 处理状态 0 未处理 1已处理 2忽略
      switch (v) {
        case 0:
          return '未处理'
        case 1:
          return '已处理'
        case 2:
          return '忽略'
        default:
          break
      }
    },
  },
  methods: {
    /** copy */
    handleCopy(v) {
      uni.setClipboardData({
        data: v,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 3000,
          })
        },
      })
    },
    /** 处理 */
    handleDeal(type) {
      let info = uni.getStorageSync('user_info')
      console.log('user-info', {
        updateUser: info?.user?.userId || '',
        updateUserName: info?.user?.userName || '',
      })
      savaAlarmStatus({
        alarmId: this.alarmId,
        dealResult: String(type),
        updateUser: info?.user?.userId || '',
        updateUserName: info?.user?.userName || '',
      }).then((res) => {
        uni.showToast({
          title: type === 1 ? '处理成功' : '忽略成功',
          icon: 'success',
          duration: 3000,
          success: () => {
            setTimeout(() => {
              this.getAlarmDetail()
            }, 1000)
          },
        })
      })
    },
    /** 状态颜色 */
    getColor(v) {
      // 处理状态 0 未处理 1已处理 2忽略
      switch (v) {
        case 0:
          return 'blue'
        case 1:
          return 'green'
        case 2:
          return 'grey1'
        default:
          break
      }
    },
    /** 获取预警详情 */
    getAlarmDetail() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      })
      getAlarmDetail({
        alarmId: this.alarmId,
        alarmCode: this.alarmCode,
      }).then((res) => {
        console.log('detail', res)
        this.detail = res
        let img_count = 0
        let mediaList = []
        // 插入图片
        if (!res.alarmevidenceList || res.alarmevidenceList.length === 0) {
          this.isVideo = false
          uni.hideLoading()
          return
        }
        res.alarmevidenceList.map((info) => {
          if (info.evidenceType === 0) {
            if (img_count === 3) {
              return
            }
            mediaList.push({
              type: info.evidenceType,
              url: info.evidencePath.replace(
                'http://172.16.0.8',
                'http://101.35.194.154:8080'
              ),
              // .replace(
              //   'http://172.16.0.8',
              //   'http://101.35.194.154:8080'
              // )
            })
            img_count++
          }
        })
        // 插入视频
        // mediaList.push(
        //   res.alarmevidenceList.find((info) => info.evidenceType === 1)
        // )
        this.videoUrl = res.alarmevidenceList.find(
          (info) => info.evidenceType === 1
        ).evidencePath.replace(
                'http://172.16.0.8',
                'http://101.35.194.154:8080'
              )
        // .replace(
        //   'http://172.16.0.8',
        //   'http://101.35.194.154:8080'
        // )
        this.info = mediaList
        uni.hideLoading()
      })
    },
    // 轮播图事件
    showVideo() {
      this.autoplay = true
      this.videoContext.play()
    },
    plays() {
      this.controls = true
      this.isShow = false
      this.$refs.myVideo.play()
    },
    colseVideo() {
      this.videoContext.pause()
      this.autoplay = false
    },
    handlePlay() {
      this.videoContext.play()
    },
    handlePause() {
      this.videoContext.pause()
    },
    change(e) {
      this.current = e.detail.current
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  .row {
    .col {
      padding: 20rpx 0;
      font-size: 32rpx;
      .col-label {
        float: left;
        color: $uni-text-color-grey;
        min-width: 20%;
      }
      .col-text {
        float: left;
        padding: 0 20rpx;
      }
      .col-contant {
        width: 70%;
      }
      .font38 {
        font-size: 38rpx;
      }
      .col-icon {
        float: left;
        color: $uni-text-color-grey;
        font-size: 40rpx;
        @include extendClick();
      }
      .grey {
        color: $uni-text-color-grey;
      }
      .blue {
        float: right;
        color: $uni-color-primary;
      }
      .green {
        float: right;
        color: $uni-color-success;
      }
      .grey1 {
        float: right;
        color: $uni-text-color-grey;
      }

      &::before {
        content: '';
        display: table;
      }
      &::after {
        content: '';
        display: table;
        clear: both;
      }
    }
    .flex {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      .btn {
        margin: 20rpx;
      }
    }
    .alarm-title {
      padding: 20rpx 0;
      font-size: 40rpx;
    }
  }
  .label {
    padding: 10rpx 0;
    font-size: 32rpx;
  }
  .swiper-box {
    height: 400rpx;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400rpx;
    color: #fff;
  }

  .image {
    width: 750rpx;
  }

  /* #ifndef APP-NVUE */
  ::v-deep .image img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
  }

  /* #endif */

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 800rpx;
      margin: 0 auto;
      margin-top: 16rpx;
    }

    .image {
      width: 100%;
    }
  }
  .example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    padding: 20rpx;
  }

  .example-body-item {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 15rpx;
    padding: 15rpx;
    height: 60rpx;
    /* #ifndef APP-NVUE */
    display: flex;
    padding: 0 15rpx;
    /* #endif */
    flex: 1;
    border-color: #e5e5e5;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
  }

  .example-body-item-text {
    font-size: 28rpx;
    color: #333;
  }

  .example-body-dots {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50px;
    background-color: #333333;
    margin-left: 10rpx;
  }
  .video-container {
    height: 400rpx;
    width: 100%;
  }
  .video {
    width: 100%;
    height: 100%;
  }
  .play {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .videoClose {
    height: 40rpx;
    width: 40rpx;
    position: absolute;
    right: 15rpx;
    top: 15rpx;
    z-index: 99999;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .swiperImage {
    width: 100%;
    position: absolute;
    height: 100%;
  }
}
</style>
